<!-- eslint-disable vue/no-unused-vars -->
<template>
  <div class="goods">
    <!-- 1.搜索区域-->
    <div class="header">
      <el-input
        class="search-box"
        placeholder="请输入所要查询的订单"
        prefix-icon="el-icon-search"
        v-model="searchName"
        clearable
      />
      <!-- <el-button type="primary" @click="dialogVisible = !dialogVisible"
        >添加订单</el-button
      > -->
      <!-- 提示框 -->
      <!-- label-width:提示框大小 -->
      <el-dialog title="添加订单" :visible.sync="dialogVisible" width="30%">
        <el-form
          :rules="rules"
          :model="orderData"
          ref="refForm"
          label-width="100px"
        >
          <el-form-item label="订单编号" prop="ID">
            <el-input v-model="orderData.ID"></el-input>
          </el-form-item>
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="orderData.name"></el-input>
          </el-form-item>
          <el-form-item label="订单价格" prop="price">
            <el-input v-model="orderData.price"></el-input>
          </el-form-item>
          <el-form-item label="商品数量" prop="number">
            <el-input v-model="orderData.number"></el-input>
          </el-form-item>
          <el-form-item label="商品类目" prop="category">
            <el-input v-model="orderData.category"></el-input>
          </el-form-item>
          <el-form-item label="订单地址" prop="address">
            <el-input v-model="orderData.address"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialogVisible-footer">
          <el-button type="primary" @click="dialogVisible = false"
            >取消</el-button
          >
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </span>
      </el-dialog>
    </div>

    <!--2.表格区域展示视图数据 -->
    <div class="wrapper">
      <template>
        <el-table :data="showTableData" border>
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="ID" label="订单编号" width="100">
          </el-table-column>
          <el-table-column prop="name" label="商品名称" width="100">
          </el-table-column>
          <el-table-column prop="price" label="订单价格" width="100">
          </el-table-column>
          <el-table-column prop="number" label="商品数量" width="100">
          </el-table-column>
          <el-table-column prop="category" label="商品类目" width="100">
          </el-table-column>
          <!-- <el-table-column prop="date" label="商品图片"> </el-table-column> -->
          <el-table-column prop="address" label="订单地址" width="100">
          </el-table-column>
          <!-- <el-table-column prop="date" label="商品描述" width="100">
            </el-table-column> -->
          <el-table-column prop="notes" label="操作 " width="180">
            <template slot-scope="scope">
              <!-- <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                > -->
              <el-button
                size="mini"
                type="success"
                round
                @click="edit(scope.row, scope.$index)"
                >编辑</el-button
              >

              <el-button size="mini" type="danger" @click="del(index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 3.分页 -->

    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.filter((d) => d.name.includes(searchName)).length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import api from "../../api/index";

export default {
  name: "order",
  components: {},
  data() {
    return {
      searchName: "",
      createUser: "",
      tableData: [],
      dialogVisible: false,
      //分页
      currentIndex: "",
      currentPage: 1, //初始页
      pagesize: 10, //
      orderData: {
        ID: "",
        name: "",
        price: "",
        number: "",
        category: "",
        address: "",
      },

      /**
       * 必填--------------------
       */
      rules: {
        ID: [{ required: true, message: "此为必填项" }],
        label: [{ required: true, message: "此为必填项" }], //订单价格
        number: [{ required: true, message: "此为必填项" }], //商品数量
        address: [{ required: true, message: "此为必填项" }], //订单地址
      },
    };
  },
  created() {
    api.order.getOrderData().then((res) => {
      this.tableData = res.data;
    });
  },
  methods: {
    //编辑
    edit(item, index) {
      this.orderData = {
        ...item,
      };
      this.keyword = 1;
      this.selected = index;

      this.dialogVisible = !this.dialogVisible;
    },
    //确定按钮
    handleConfirm() {
      if (this.keyword === 0) {
        this.tableData.push(this.orderData);
      } else {
        this.$set(this.tableData, this.selected, this.orderData);
      }
      this.dialogVisible = !this.dialogVisible;
    },

    //分页
    handleSizeChange: function (size) {
      this.pagesize = size;
      // console.log(this.pagesize) //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage) //点击第几页
    },
    // 删除按钮
    del(index) {
      this.tableData.splice(index, 1);
    },
  },
  computed: {
    /**
       搜索查询数据&分页-------------------------------
       */
    showTableData() {
      return this.tableData
        .filter((d) => d.name.includes(this.searchName))
        .slice(
          (this.currentPage - 1) * this.pagesize,
          this.currentPage * this.pagesize
        );
    },
  },
};
</script>

<style scoped lang="less">
.goods {
  margin: 20px;
}
.header {
  display: flex;

  button {
    margin-left: 20px;
  }
}
.wrapper {
  margin: 20px 0;
}
</style>
